<template>
  <div ref="net_sec" class="net-sec" style="width: 100%; height: 96%"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.net_sec, this.theme);
      let angle = 0; //角度，用来做简单的动画效果的
      let value = 78; //图上角度数据
      let option = {
        title: {
          text: "{a|" + value + "}{c|%}\n用户评价",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 20,
            color: "rgba(255,255,255,0.8)",
            rich: {
              a: {
                fontSize: 30,
                color: "rgba(255,255,255,0.8)",
                fontWeight: "bold",
              },
              c: {
                fontSize: 30,
                color: "rgba(255,255,255,0.8)",
                fontWeight: "normal",
              },
            },
          },
        },
        series: [
          //内环
          {
            name: "",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.5,
                  startAngle: ((0 + -angle) * Math.PI) / 180,
                  endAngle: ((360 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#3D7FFF",
                  fill: "transparent",
                  lineWidth: 2,
                },
                silent: true,
              };
            },
            data: [0],
          },
          //外环
          {
            name: "用户评价",
            type: "pie",
            radius: ["85%", "70%"],
            // silent: true,
            // clockwise: true,
            // startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {

                show:false,
                position:'center',
                distance:5,
                fontSize:20,
                 color:'rgba(255,255,255 ,.0.8)',
              formatter:'{a}\n{b}'

            },
            data: [
              {
                value: value,
                name: "用户评价",
                itemStyle: {
                    //外环发光
                    borderWidth: 0.5,
                    shadowBlur: 20,
                    // borderColor: '#4bf3f9',
                    // shadowColor: '#9bfeff',
                    color: {
                      // 圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#8F00FF", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#00c0ff", // 100% 处的颜色
                        },
                      ],
                    },


                }

              },
              {
                value: 100 - value,
                name: "",
                label: {

                    show: false
                },
                itemStyle: {
                    color: "#173164"
                }
              }
            ]

          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      this.allData = {};
    },
    updateChart() {},
  },
  mounted() {
    this.initChart();
    // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.net-sec {
  width: 100%;
  height: 96%;
}
</style>
